{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- block formErrors(form) -}}
  {{- if !form.IsValid() -}}
    <div class="max-w-xl">
    {{- yield message(type="error") content -}}
      <strong class="text-red-800">Errors</strong>
      {{- if form.Errors() -}}
        {{ range form.Errors() }}
          <p>{{ .Error() }}</p>
        {{- end -}}
      {{ else }}
        <p>Please check your form for errors.</p>
      {{ end }}
    {{- end -}}
    </div>
  {{- end -}}
{{- end -}}


{{- block formField(field, name, label, help, class="", required=false, controlAttrs=attrList()) -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if field.Errors -}}{{ class = class + " field-err" }}{{- end -}}

  <div class="field{{ if class }} {{ class }}{{ end }}">
    {{ if label -}}
      <label for="{{ name }}">
        {{- label -}}
        {{- if required }} <span class="sr-only">Required</span>{{- end -}}
        {{- if required }} <span title="Required" aria-hidden class="text-red-600">•</span>{{- end -}}
      </label>
    {{- end }}
    <div class="flex-grow" {{ controlAttrs }}>
      {{ yield content }}
      {{ if field.Errors }}
        <ul class="mt-1 list-disc list-inside text-red-800">
        {{- range field.Errors }}
          <li>{{ . }}</li>
        {{ end -}}
        </ul>
      {{ end }}
      {{ if help }}<span class="block mt-1 text-green-700">{{ help }}{{ end }}
    </div>
  </div>
{{- end -}}


{{- block textField(
  field, value=nil, type="text", name, label, class="", required=false, help,
  controlAttrs=attrList(), inputAttrs=attrList(), inputClass="form-input w-full"
) -}}
  {{- if type == "password" -}}
    {{ value = "" }}
  {{- else if value == nil -}}
    {{ value = field.String() }}
  {{- end -}}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}

  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <input type="{{ type }}" id="{{ name }}" name="{{ name }}"
     value="{{ value }}" class="{{ inputClass }}" {{ inputAttrs }} />
    {{- yield content -}}
  {{- end -}}
{{- end -}}


{{- block dateField(
  field, value=nil, name, label, class, required, help,
  controlAttrs=attrList(), inputAttrs=attrList(), inputClass="form-input",
) -}}
  {{ value = field.String() }}
  {{ yield textField(field=field, value=value, type="date", name=name,
                     label=label, class=class, required=required, help=help,
                     controlAttrs=controlAttrs, inputAttrs=inputAttrs,
                     inputClass=inputClass) }}
{{- end -}}


{{- block checkboxField(
  field, checked=nil, name, label, class="", help
) -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if checked == nil }}{{ checked = field.Value() }}{{ end -}}
  {{- if field.Errors -}}{{ class = class + " with-errors" }}{{ end }}
  <div class="field{{ if class }} {{ class }}{{ end }}">
    <span class="field-spacer">&nbsp;</span>
    <div class="control">
      <input type="hidden" name="{{ name }}" value="f" />
      <input type="checkbox" id="{{ name }}" name="{{ name }}"
       class="form-checkbox" value="t"
       {{- if checked }} checked="checked"{{ end -}} />
      <label class="font-bold" for="{{ name }}">{{ label }}</label>
      {{ if field.Errors }}
        <ul class="mt-1 list-disc list-inside text-red-800">
        {{- range field.Errors }}
          <li>{{ . }}</li>
        {{ end -}}
        </ul>
      {{ end }}
      {{ if help }}<span class="block mt-1 text-green-700">{{ help }}{{ end }}
    </div>
  </div>
{{- end -}}


{{- block selectField(
  field, value=nil, name, options, label, class, required, help,
  controlAttrs=attrList(), inputAttrs=attrList(), inputClass="form-select w-full"
) -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if value == nil -}}{{ value = field.Value() }}{{- end -}}
  {{- if !options -}}{{ options = field.Choices() }}{{- end -}}
  {{- if field.Errors -}}{{ class = class + " with-errors" }}{{ end }}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}
  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <select name="{{ name }}" id="{{ name }}" class="{{ inputClass }}" {{ inputAttrs }}>
      {{- range options -}}
        <option value="{{ .[0] }}" {{ if string(value) == string(.[0]) }}selected="selected"{{ end }}>{{ .[1] }}</option>
      {{- end -}}
    </select>
  {{- end -}}
{{- end -}}

{{- block multiSelectField(
  field, name, label, class, help, type="checkbox"
) -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if field.Errors -}}{{ class = class + " field-err" }}{{- end -}}
  {{- inputClass := type == "radio" ? "form-radio" : "form-checkbox" -}}
  <div class="field{{ if class }} {{ class }}{{ end }}">
    <label>{{ label }}</label>
    <div class="flex-grow">
      <input type="hidden" name="{{ name }}" value="">
      <ul class="space-y-2">
        {{- range field.Field.Choices() -}}
         <li class="space-x-1">
          <input type="{{ type }}" name="{{ name }}" id="{{ name }}_{{ .[0] }}" value="{{ .[0] }}"
           class="{{ inputClass }}"
           {{ if field.Field.InChoices(.[0]) }} checked{{ end }}>
          <label for="{{ name }}_{{ .[0] }}">{{ .[1] }}</label>
         </li>
        {{- end -}}
      </ul>
      {{ if field.Errors }}
        <ul class="mt-1 list-disc list-inside text-red-800">
        {{- range field.Errors }}
          <li>{{ . }}</li>
        {{ end -}}
        </ul>
      {{ end }}
      {{ if help }}<span class="block mt-1 text-green-700">{{ help }}{{ end }}
    </div>
  </div>
{{- end -}}

{{- block passwordField(
  field, value=nil, name, label, class="", required=false, help,
  inputClass="form-input w-full", inputAttrs=attrList(),
) -}}
  {{- controlAttrs := attrList("data-controller", "pass-reveal") -}}
  {{- inputAttrs.Set("data-pass-reveal-target", "field") -}}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}

  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <div class="{{ inputClass }} inline-flex gap-2">
      <input type="password" id="{{ name }}" name="{{ name }}" value=""
       class="flex-grow hfw:ring-0 focus-visible:ring-0 focus-visible:bg-transparent
       focus-visible:shadow-none focus-visible:outline-none focus-visible:ring-offset-0"
       {{ inputAttrs }} />
      <button type="button" data-pass-reveal-target="btn" data-action="pass-reveal#toggle"></button>
      <template data-pass-reveal-target="show">
        {{- yield icon(name="o-show", class="svgicon", svgClass="") -}}
      </template>
      <template data-pass-reveal-target="hide">
        {{- yield icon(name="o-hide", class="svgicon", svgClass="") -}}
      </template>
    </div>
  {{- end -}}
{{- end -}}

{{- block timeTokenField(
  field, value=nil, name, label, class, help, inputClass="form-input w-full",
) -}}
  {{ value = field.String() }}
  {{ class = class + " relative"}}
  {{ inputAttrs := attrList("size", "5", "data-timetoken-target", "field") }}
  {{ inputClass = inputClass + " pr-8" }}
  {{ controlAttrs := attrList("data-controller", "timetoken", "data-timetoken-hidden-class", "hidden") }}
  {{ yield textField(field=field, value=value, type="text", name=name,
                     label=label, class=class, help=help,
                     controlAttrs=controlAttrs, inputAttrs=inputAttrs,
                     inputClass=inputClass) content -}}
    <button type="button" class="-ml-6 mr-2" data-timetoken-target="btn">
      {{- yield icon(name="o-calendar", class="svgicon", svgClass="") -}}
    </button>
    <template data-timetoken-target="template">
      <div class="absolute top-full right-1 z-20 -mt-1 p-4 bg-gray-50 border rounded shadow-xl">
        <label class="block mb-2">The previous:</label>
        <div class="flex">
          <input type="number" size="3" min="0"
          class="form-input text-sm border-r-0 rounded-r-none"
          data-timetoken-target="value"
          data-action="timetoken#update">
          <select class="form-select text-sm rounded-l-none"
           data-action="timetoken#update"
           data-timetoken-target="unit">
            <option value="d">Day(s)</option>
            <option value="w">Week(s)</option>
            <option value="m">Month(s)</option>
            <option value="y">Year(s)</option>
          </select>
        </div>
        <p class="my-2">- or -</p>
        <input type="date" class="form-input text-sm w-full" data-action="timetoken#update" data-timetoken-target="absolute">
      </div>
    </template>
  {{ end }}
{{- end -}}
